{% extends "./layout.html" %}
{% block css %}
<link rel="stylesheet" href="/css/mobile/chapterDetail.css">
{% endblock %}

{% block content %}
<div class="header_container">
    {% include "mobile/header.html" %}
</div>
<div id="chapter">
    <div class="banner">
        <div class="focus_img"></div>
        <div class="book_title">前端开发手册</div>
    </div>
    <div class="menu">
        <div class="jumap">
            <button class="details button">简介</button>
            <button class="catalog button">目录</button>
        </div>
        <div class="introduce">
            <div class="introduce_title">简介</div>
            <p class="introduce_content">hahah</p>
        </div>
        <div class="list">
            {% for chapter in chapterPage %}
            <div class="fold">
                <ul class="chapters">
                    <li class="chapter-item" data-index="1">
                        <p>第{{loop.index}}章：{{chapter.title}}</p>
                        <i>></i>
                    </li>
                </ul>
                <ul class="sections">
                    {% for section in chapter.dataValues.sectionList %}
                    <a href="/section/{{section.id}}">
                        <li class="section-item">
                            第{{loop.index}}节：{{section.title}}
                        </li>
                    </a>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script src="/js/jquery-3.6.0.min.js"></script>
<script>
    // //切换目录，详情
    $(".jumap .details").click(function () {
        $(".jumap .details").css("color", "#0090ff");
        $(".jumap .details").css("border-bottom", "3px solid #0090ff");
        $(".jumap .catalog").css("color", "black");
        $(".jumap .catalog").css("border-bottom", "3px solid white");
        $(".menu .introduce").css("display", "block");
        $(".menu .list").css("display", "none");
    })
    $(".jumap .catalog").click(function () {
        $(".jumap .catalog").css("color", "#0090ff");
        $(".jumap .catalog").css("border-bottom", "3px solid #0090ff");
        $(".jumap .details").css("color", "black");
        $(".jumap .details").css("border-bottom", "3px solid white");
        $(".menu .introduce").css("display", "none");
        $(".menu .list").css("display", "block");
    })

    let flag = true
    $(".chapters").click(function (){
        if(flag){
            $(this).next(".sections").slideDown(300)
            $(this).find("i").css("transform","rotate(90deg)")
            flag = !flag
        }else{
            $(this).next(".sections").slideUp(300)
            $(this).find("i").css("transform","rotate(0deg)")
            flag = !flag
        }
    })
</script>
{% endblock %}